import React, { useState, useEffect } from "react";

interface WakeIndicatorProps {
    isWakeListening: boolean;
    onWakeDetected: () => void;
}

const WakeIndicator: React.FC<WakeIndicatorProps> = ({
    isWakeListening,
    onWakeDetected,
}) => {
    const [isVisible, setIsVisible] = useState(false);

    useEffect(() => {
        // 当语音唤醒开启时显示指示器
        setIsVisible(isWakeListening);
    }, [isWakeListening]);

    if (!isVisible) return null;

    return (
        <div
            style={{
                position: "fixed",
                bottom: "20px",
                right: "20px",
                width: "60px",
                height: "60px",
                borderRadius: "50%",
                background: "linear-gradient(135deg, #00c3ff 0%, #ffff1c 100%)",
                border: "2px solid #fff",
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                boxShadow: "0 4px 16px rgba(0, 195, 255, 0.4)",
                animation: "wake-pulse 2s infinite",
                zIndex: 150,
                cursor: "pointer",
            }}
            onClick={onWakeDetected}
            title="语音唤醒已开启，说&quot;小维&quot;即可唤醒"
        >
            <span
                role="img"
                aria-label="语音唤醒"
                style={{
                    fontSize: "24px",
                    color: "#333",
                    filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.3))",
                }}
            >
                🎤
            </span>

            {/* 语音波纹动画 */}
            <div
                style={{
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                    width: "100%",
                    height: "100%",
                    borderRadius: "50%",
                    border: "2px solid rgba(0, 195, 255, 0.6)",
                    animation: "wake-ripple 2s infinite",
                }}
            />
            <div
                style={{
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                    width: "100%",
                    height: "100%",
                    borderRadius: "50%",
                    border: "2px solid rgba(0, 195, 255, 0.4)",
                    animation: "wake-ripple 2s infinite 0.5s",
                }}
            />
            <div
                style={{
                    position: "absolute",
                    top: "50%",
                    left: "50%",
                    transform: "translate(-50%, -50%)",
                    width: "100%",
                    height: "100%",
                    borderRadius: "50%",
                    border: "2px solid rgba(0, 195, 255, 0.2)",
                    animation: "wake-ripple 2s infinite 1s",
                }}
            />

            <style>{`
                @keyframes wake-pulse {
                    0% { transform: scale(1); }
                    50% { transform: scale(1.05); }
                    100% { transform: scale(1); }
                }
                
                @keyframes wake-ripple {
                    0% {
                        transform: translate(-50%, -50%) scale(1);
                        opacity: 1;
                    }
                    100% {
                        transform: translate(-50%, -50%) scale(2);
                        opacity: 0;
                    }
                }
            `}</style>
        </div>
    );
};

export default WakeIndicator;
